<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echars.js"></script>
    <script src="./theme/purpleTheme.js"></script>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div>
        <button class="btn1">点击触发事件</button>
        <button class="btn2">clear</button>
        <button class="btn3">setOption</button>
        <button class="btn4">dispose</button>
    </div>
        <script>
        $(function() {
            var myChart = echarts.init($('.box')[0], 'purpleTheme');
            var option = {
                tooltip: {
                    data: ['01', '02', '03', '04', '05'],
                },
                series: [{
                    type: 'pie',
                    radius: ['0%', '50%'],
                    data: [{
                        name: '01', value: 12,
                    },{
                        name: '02',
                        value: 43,
                    },{
                        name: '04', value: 76,
                    }, {
                        name: '05', value: 87
                    }],
                }]
            }
            myChart.setOption(option);

            $('.btn1').click(function() {
                // alert(11);
                // 显示高亮
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: 1,
                });
                // 显示提示框
                myChart.dispatchAction({
                    type: 'showTip', 
                    dataIndex: 1,
                    seriesIndex: 0
                })
            })

            $('.btn2').click(function() {
                myChart.clear();
            })

            $('.btn3').click(function() {
                myChart.setOption(option);
            })

            $('.btn4').click(function() {
                myChart.dispose();
            })
            myChart.showLoading();
            myChart.hideLoading();
        })
    </script>
</body>
</html>